<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/manager/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/manager/order">订单信息</a></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="header" />

    <el-dialog width="600px" v-model="menuShowDialog" title="菜单详情">
      <el-table :data="menuList" border height="240px">
        <el-table-column label="菜品名称" prop="menuName"></el-table-column>
        <el-table-column label="价格" prop="menuPrice"></el-table-column>

        <el-table-column label="图片">
          <template #default="scope">
            <el-image
              :src="scope.row.menuPicture"
              fit="cover"
              style="height: 45px; width: 45px; border-radius: 5px"
            />
          </template>
        </el-table-column>

        <el-table-column label="数量" prop="count" />
      </el-table>
      <div v-if="orderList.type == '外卖'">
        <p>配送状态:{{ orderList.state }}</p>
        <p>配送员:{{ orderList.senderName }}</p>
        <p>配送员电话:{{ orderList.senderPhone }}</p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="linkShop()">联系用户</el-button>
          <el-button @click="menuShowDialog = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-table :data="tableData" style="width: 100%" height="70vh">
      <el-table-column label="客户名字" prop="username" />
      <el-table-column label="客户电话" prop="userPhone" width="150px"> </el-table-column>
      <el-table-column label="金额" width="200">
        <template #default="scope">
          {{ "￥  共计" + parseFloat(scope.row.money) + "元" }}
        </template>
      </el-table-column>
      <el-table-column label="配送地址" prop="address" width="100px"> </el-table-column>
      <el-table-column label="下单时间" prop="inputTime" width="180px"></el-table-column>
      <el-table-column label="支付状态" prop="applyState" width="120px"></el-table-column>
      <el-table-column label="点餐类型" width="100px" prop="type" />
      <el-table-column label="备注" prop="demo"></el-table-column>
      <el-table-column label="菜单详情">
        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pageSize"
      v-model:page-size="pageItem"
      :page-sizes="[20, 30, 50, 100]"
      background="blue"
      layout="total, sizes, prev, pager, next, jumper"
      :total="ItemTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog
      v-model="ChatWithShop"
      title="聊天对话框"
      width="500"
      :before-close="handleClose"
    >
      <div class="chat-container" style="height: 300px; width: 100%; overflow-y: auto">
        <div class="chat-container">
          <div
            v-for="(message, index) in ChatList"
            :key="index"
            :class="getMessageClass(message)"
          >
            {{ message.content }}
          </div>
        </div>
      </div>
      <div>
        <el-input v-model="content" style="width: 400px" placeholder="请输入聊天内容" />
        <el-button type="primary" @click="SenderOnline">发送</el-button>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="ChatWithShop = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ref, reactive } from "vue";
import { Timer, Message } from "@element-plus/icons-vue";
import { el } from "element-plus/es/locale";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import type { UploadFile } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";

const token = ref(localStorage.getItem("shop_auth_token"));
const tokenBody = {
  token: token.value,
};
const optionList = ref([
  {
    label: "正常",
    value: 1,
  },
  {
    label: "停售",
    value: 0,
  },
]);
const menuList = ref([]);
const orderList = ref([]);
const menuShowDialog = ref(false);
const getMessageClass = (message) => {
  // 根据发送人和接收人的ID来确定消息的样式
  if (message.sendId === "当前用户的ID") {
    return "sent-message"; // 发送方样式
  } else {
    return "received-message"; // 接收方样式
  }
};
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`);
  search();
};
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`);
  search();
};
const orderd = ref("");
const handleEdit = (row) => {
  console.log(row);
  orderd.value = row.userId;
  menuList.value = row.menuName;
  orderList.value = row;
  menuShowDialog.value = true;
};
const tableData = ref([]);
const pageSize = ref(1);
const pageItem = ref(20);
const ItemTotal = ref(0);
const search = () => {
  axios
    .get("/api/order/orderForShop/" + pageSize.value + "/" + pageItem.value, {
      headers: {
        token: token.value,
      },
    })
    .then((res) => {
      // console.log("res :", res);
      if (res.data.success) {
        const msg = res.data.message.list;
        tableData.value = msg;
        ItemTotal.value = res.data.message.total;
      }
    })
    .catch((err) => {
      console.log("err :", err);
    });
};

search();
const ChatList = ref([]);
const content = ref("");
const order = ref("");
const ChatWithShop = ref(false);
const linkShop = () => {
  axios
    .get("/api/online/all/chat/user/" + orderd.value, {
      headers: {
        token: token.value,
      },
    })
    .then((res) => {
      console.log("code line-296 \n\r😇 result:\n\r", res);
      if (res.data.success) {
        ChatWithShop.value = true;
        ChatList.value = res.data.message;
      } else {
        ElMessage({
          type: "error",
          message: res.data.message,
        });
      }
    })
    .catch((err) => {});
};
const SenderOnline = () => {
  axios
    .get("/api/online/chat/user/" + orderd.value + "?content=" + content.value, {
      headers: {
        token: token.value,
      },
    })
    .then((res) => {
      console.log("code line-343 \n\r😃 res:\n\r", res);
      if (res.data.success) {
        ElMessage({
          type: "success",
          message: "发送成功",
        });
        content.value = "";
      } else {
        ElMessage({
          type: "error",
          message: res.data.message,
        });
      }
      linkShop();
    })
    .catch((err) => {});
};
</script>

<style lang="scss" scoped>
.header {
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.insert {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
</style>
